<template>
    <div class="box">
        <div class="bianK">
            <div class="bos">
                <div class="bosLeft">
                    <span>首页应用</span>
                    <span>添加或删除，根据最近使用排序</span>
                </div>
                <div class="bosRight" @click="goMyApp">
                    <a>我的应用</a>
                </div>
            </div>
            <div class="xiahuaX"></div>
            <!-- tab -->
            <div class="center">
                <div class="nav">
                    <div class="navOne">
                        <template v-for="(item, index) of tabs" :key="index">
                            <div class="btn" :class="{ active: itemIndex === item.orderNum }"
                                @click="btnClick(item.orderNum)">
                                {{ item.text }}</div>
                        </template>
                    </div>
                </div>
                <div v-if="itemIndex == 1">
                    <div class="center">
                        <div style="display: flex;justify-content: space-between;">
                            <div class="container">
                                <div class="container-one" v-for="(item, index) in form " :key="item.id" draggable="true"
                                    @dragstart="handleDragStart($event, index)" @dragover="handleDragOver($event)"
                                    @drop="handleDrop($event, index)">
                                    <div @click="toggleFavorite(item)" :type="item.remark2 ? '1' : null" class="shouC">
                                        <div class="icon-aixin_shixin" v-if="item.remark2"></div>
                                        <div v-else class="icon-aixin"></div>
                                    </div>
                                    <div>
                                    </div>
                                    <div class="container-Two">
                                        <div class="container-Img">
                                            <a-badge :count="item.count">
                                                <a :href="'#' + item.accessPath">
                                                    <img :src='item.icon ? item.icon : defaultImageSrc' alt="加载失败">
                                                </a>
                                            </a-badge>
                                        </div>
                                        <div class="container-Two-name">{{ item.name }}</div>
                                        <div>{{ item.desc }}</div>
                                    </div>
                                </div>
                                <div class="container-one" @click="yingY">
                                    <div class="container-Two">
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                        <div class="icon-iconmobanfuzhi"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-if="itemIndex == 2">研判分析工具</div>
                <div v-if="itemIndex == 3">统计报表</div>
            </div>
            <div class="fenY">
                <!-- <a-pagination v-model:current="current" 
                :total="50" show-less-items /> -->
                <a-pagination :current="currentPage" :total="totalItems" :page-size="pageSize"
                    @change="handlePageChange"></a-pagination>
            </div>
        </div>
    </div>
</template>

<script>

import draggable from 'vuedraggable';
export default {
    name: 'MHIndex',
    components: {
        draggable,
    },
    data() {
        return {
            drag: false,
            // defaultImageSrc: require("@/assets/img/theme/403.png").default,
            defaultImageSrc: '图片加载失败',
            itemIndex: 1,
            form: [],
            currentPage: 1, // 当前页码
            totalItems: 0, // 数据总数
            pageSize: 8, // 每页显示的数据条数
        };
    },

    mounted() {
        this.init();
    },

    methods: {
        init() {
            this.serch();
            this.fetchData();
        },
        serch() {
            const that = this;
            this.$api.GET('/data/dict/item/pageList?groupId=APP_TYPE').then(res => {
                if (res.data && res.data.length > 0) {
                    that.tabs = res.data.sort((a, b) => {
                        return a.orderNum - b.orderNum;
                    });
                }
                if (res.data && res.data.length > 0) {
                    that.$api.GET('/realm/app/pageList').then(res => {
                        console.log(res);
                        that.form = res.data;
                    });
                }
            })
        },
        // 分页
        fetchData() {
            const params = {
                page: this.currentPage,
                rows: this.pageSize,
                // fileName: this.query.fileName
            }
            console.log(params);
            this.$api.GET('/realm/app/pageList', params).then(res => {
                console.log('分页', res.data);
                this.fileList = res.data; // 更新数据源
                this.totalItems = res.count; // 更新数据总数
            })
        },
        handlePageChange(page) {
            this.currentPage = page; // 更新当前页码
            this.fetchData(); // 重新获取数据
        },
        // 拖拽排序
        handleDragStart(event, index) {
            event.dataTransfer.setData('text/plain', index.toString());
        },
        handleDragOver(event) {
            event.preventDefault();
        },
        handleDrop(event, newIndex) {
            event.preventDefault();
            const index = parseInt(event.dataTransfer.getData('text/plain'), 10);
            const draggedItem = this.form[index];
            this.form.splice(index, 1);
            this.form.splice(newIndex, 0, draggedItem);
            for (let i = 0; i < this.form.length; i++) {
                this.form[i].orderNum = i + 1;
            }
            console.log(this.form);
        },
        // tab切换
        // btnClick(index) {
        //     this.itemIndex = index
        // },
        btnClick(key) {
            this.itemIndex = key
            console.log(this.itemIndex);
            this.$api.GET('/realm/app/pageList' + key).then(res => {

            })
        },
        // 跳转应用中心后台页面
        yingY() {
            this.$router.push('/portal/myApp')
        },
        // 收藏
        toggleFavorite(item) {
            item.isFavorite = !item.isFavorite;
            const params = {
                marketId: item.id
            }
            const paramsA = {
                id: item.id
            }
            // console.log('params', params);
            if (item.remark2 == '1') {
                this.$api.DELETE('/modules/myApp/delete', paramsA).then(res => {
                    console.log(res);
                    item.remark2 = null;
                    this.form = this.form.filter(item => item.id !== id)
                    this.init()
                })
            } else {
                this.$api.PUT('/modules/myApp/insert', params).then(res => {
                    // console.log(res);
                    this.init()
                })
            }
        },
        // 进入我的应用
        goMyApp() {
            // console.log(q);
            this.$router.push('/portal/myApp');
        }
    },
};
</script>

<style lang="less" scoped>
.shouC {
    float: left;
    left: 20px
}

.container {
    margin: 30px 30px 30px 30px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    text-align: center;

    // width: 1500px;

    img {
        width: 60px;
        height: 60px;
        border-radius: 10px;
    }

    .container-one {
        margin: 0 20px 20px 20px;
        text-align: center;
        color: #fff;
        background: #06307D;
        border-radius: 20px;
        width: 330px;

        .container-Img {
            width: 100%;
            height: 58px;
        }

        .container-Two {
            padding: 30px 30px;
            color: #7e7e85;
            height: 160px;


            .container-Two-name {
                padding: 15px 0 0 0;
                color: #f3f5f8;
            }
        }

        div {
            padding-top: 5px;
            align-items: center;
        }
    }
}

.center {
    width: 100%;
    border-radius: 10px;
    font-size: 14px;

    .nav {
        padding: 20px 0 0 0;
        display: flex;
        justify-content: center;
        // background-color: rgba(12, 8, 117);

        .navOne {
            padding: 5px 0;
            border-radius: 20px;
            display: flex;
            align-items: center;
            background-color: rgba(12, 8, 117);
        }

        .btn {
            width: 120px;
            padding: 5px 0;
            // border-radius: 5px;  
            text-align: center;
            font-size: 14px;
            font-weight: 600;
            // padding: 10px 15px;
            border-radius: 20px;
            // margin-right: 5px;
            color: #fcf8f8;

        }

        .active {
            color: #f3f0f0;
            background: rgba(0, 68, 255);
            padding: 5px 0px;
        }
    }
}

.box {
    display: flex;
}

.bianK {
    width: 100%;
    margin: 80px 180px;
    border: 1px solid #0044ff;
    border-radius: 10px;
    padding: 15px 0;
    box-shadow: inset 0px 0px 10px 2px #030753;
    font-size: 14px;
}

.bos {
    display: flex;
    justify-content: space-between;
    padding: 20px 30px;

    .bosLeft {
        span:nth-child(1) {
            margin-right: 30px;
            font-size: 18px;
            color: #fff;
        }

        span:nth-child(2) {
            font-size: 14px;
            color: #aca6a6;
        }
    }

    .bosRight {
        font-size: 18px;
        color: #fff;
    }
}

.xiahuaX {
    border: 1px solid #7591ca;
}


.fenY {
    text-align: center;
    padding-bottom: 30px;

    ::v-deep(.ant-pagination-prev) {
        background-color: #0A47C8;
        border: none;
        color: #fcf8f8;
        border-radius: 10px;
        width: 60px;
        height: 50px;
        line-height: 50px;
    }

    ::v-deep(.ant-pagination-next) {
        background-color: #0A47C8;
        border: none;
        color: #fcf8f8;
        border-radius: 10px;
        width: 60px;
        height: 50px;
        line-height: 50px;
    }

    ::v-deep(.ant-pagination-item-link) {
        background-color: #0A47C8;
        border: none;
        color: #fcf8f8;
        border-radius: 10px;
        width: 60px;
        height: 50px;
        line-height: 50px;
    }

    ::v-deep(.ant-pagination-item) {
        background-color: #0A47C8;
        border: none;
        border-radius: 10px;
        width: 60px;
        height: 50px;
        line-height: 50px;
    }


    ::v-deep(.ant-pagination-item a) {
        color: #fff
    }

    ::v-deep(.ant-pagination-item-active) {
        background-color: #02D6F4;
    }
}
</style>